<!-- 考勤统计 -->
<template>
  <a-card :bordered="false">
    <vxe-grid
      id="OaSignStatistics"
      ref="vxeTable"
      show-overflow
      v-bind="options"
      :columns="columns"
      :data="tableData"
      @toolbar-button-click="toolbarButtonClickEvent"
      @cell-click="cellClick"
    >
      <template v-slot:toolbar_buttons>
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-form-item label="统计月份">
            <a-month-picker :allowClear="false" v-model="queryParam.month" placeholder="请选择统计月份"></a-month-picker>
          </a-form-item>
          <!-- <a-form-item>
            <j-select-user-by-dep v-model="queryParam.acctid"></j-select-user-by-dep>
          </a-form-item> -->
          <a-form-item>
            <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
          </a-form-item>
        </a-form>
      </template>
      <!-- <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template> -->

    </vxe-grid>
  </a-card>
</template>
<script >
import moment from 'moment'
import { postActionQs, postAction } from '@/api/manage'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
export default {
  name: 'OaSignStatistics',
  mixins: [VxeTableMixin],
  components: {
    JSelectUserByDep
  },
  data() {
    return {
      loading: false,
      queryParam: {
        month: ''
      },
      columns: [],
      baseTableColumn: [
        { type: 'seq', width: 40, fixed: 'left' },
        // { field: 'name', title: '部门', width: 80 }
        { field: 'name', title: '姓名', width: 40, fixed: 'left' }
      ],
      otherColumn: [
        { field: '2', title: '工作天数', fixed: 'right', width: 40 },
        { field: '7', title: '正常打卡', fixed: 'right', width: 40 },
        { field: '9', title: '迟到天数', fixed: 'right', width: 40 },
        { field: '6', title: '旷工天数', fixed: 'right', width: 40 },
        { field: '10', title: '早退天数', fixed: 'right', width: 40 },
        { field: '3', title: '补卡次数', fixed: 'right', width: 40 },
        { field: '4', title: '外勤天数', fixed: 'right', width: 40 },
        { field: '11', title: '出差天数', fixed: 'right', width: 40 },
        { field: '5', title: '请假次数', fixed: 'right', width: 40 },
        { field: '12', title: '缺卡次数', fixed: 'right', width: 40 }
      ],
      tableData: [],
      url: {
        list: '/wx/cp/oa/getAllCheckinDayData'
      },
      disableMixinCreated: true
    }
  },
  created() {
    this.queryParam.month = moment().format('YYYY-MM')
    this.loadData(1)
    postActionQs('/wx/cp/oa/getCheckinMonthData', {
      startTime: '2021-03-01',
      endTime: '2021-03-31'
    }).then(res => {
      console.log(res)
    })
  },
  methods: {
    loadData(arg) {
      this.getCoumns()
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.currentPage = 1
      }
      this.loading = true
      var param = this.getQueryParams()
      postActionQs(this.url.list, param).then(res => {
        this.loading = false
        // this.tablePage.total = 10
        this.tableData = res.result
      })
    },
    getCoumns() {
      this.columns = JSON.parse(JSON.stringify(this.baseTableColumn))
      const days = moment(this.queryParam.month).daysInMonth()
      for (var i = 1; i <= days; i++) {
        this.columns.push({
          field: 'day_' + i,
          title: i
        })
      }
      this.columns = this.columns.concat(this.otherColumn)
    },
    loadColumn() {
      this.$nextTick(() => {
        this.$refs.vxeTable1.loadColumn(this.columns)
      })
    },
    getTablecolumn() {
      this.column = this.baseTableColumn.concat(this.otherColumn)
    },
    searchQuery() {
      this.month = moment(this.queryParam.month).format('YYYY-MM')
      this.loadData(1)
    },
    getQueryParams() {
      // 获取查询条件
      var param = {
        year: moment(this.queryParam.month).year(),
        month: moment(this.queryParam.month).month() + 1
        // year: moment(this.month).format('YYYY'),
        // month: moment(this.month).format('MM')
        // startTime: this.month + '-01',
        // endTime: this.month + '-' + moment(this.month).daysInMonth()
        // pageNo: this.tablePage.currentPage,
        // pageSize: this.tablePage.pageSize
        // 'userIdList': this.queryParam.acctid
      }
      return param
    },
    cellClick(data) {
      console.log(data)
    }
  }
}
</script>
